<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=0.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<link href="../src/css/public.css" type="text/css" rel="stylesheet"/>
<link href="../src/css/bluecolor.css" type="text/css" rel="stylesheet"/>
<title>我的任务</title>
</head>
<body>
<!--头部-->
<header class="product-hd"> <a href="index.html" class="pre"></a>我的任务 </header>
<div class="task-top-con">
  <p class="hezi-txt">css盒子模型</p>
  <p class="task-percent-img"><span>80%</span></p>
  <a href="homework.html">
  <p class="tiao-zhan">立即挑战</p>
  </a>
  <p class="star-time-txt">start time </p>
  <p class="clearfix"><span class="left-time">2016-06-06 11:32</span><span class="right-teacher">导师&nbsp;:&nbsp;<span>&nbsp;王老师</span></span></p>
  <p class="star-time-txt">end time </p>
  <p class="clearfix"><span class="left-time"> 2016-06-12 11:32</span><span class="right-teacher">懒惰币：<span>10元</span></span></p>
</div>
<!--说明文字框架-->
<article class="task-mid-txt">
  <p class="mid-red-txt">未在规定时间内完成挑战会扣除全部懒惰币</p>
  <p class="yin-yan">引言：从这一节开始，我们就进入本系列的第三部分
    —css呈现。本部分将描述css在页面的几种布局和呈
    现的特性。包括两类：文字、块。 </p>
</article>
<!--学习课程总体-->
<article class="task-bottom-con">
  <p class="xx-lj">学习路径</p>
  
  <!--包含课程模块1,2-->
  <div class="hot-course-img-con clearfix"> 
    <!--课程模块1--> 
    <a href="#">
    <div class="hot-course-img-one">
      <div class="lk lk-mar">
        <div class="course-txt-con">
          <p class="couse-one-txt">课程学习</p>
          <p class="couse-two-txt">1-1&nbsp;概述</p>
        </div>
      </div>
    </div>
    </a> 
    <!--课程模块2--> 
    <a href="#">
    <div class="hot-course-img-two">
      <div class="lp lp-mar">
        <div class="course-txt-con">
          <p class="couse-one-txt">课程学习</p>
          <p class="couse-two-txt">1-1&nbsp;概述</p>
        </div>
      </div>
    </div>
    </a> </div>
  <!--包含课程模块3,4-->
  <div class="hot-course-img-con clearfix"> 
    <!--课程模块3--> 
    <a href="#">
    <div class="hot-course-img-one">
      <div class="lk lk-mar">
        <div class="course-txt-con">
          <p class="couse-one-txt">课程学习</p>
          <p class="couse-two-txt">1-1&nbsp;概述</p>
        </div>
      </div>
    </div>
    </a> 
    <!--课程模块4--> 
    <a href="#">
    <div class="hot-course-img-two">
      <div class="lp lp-mar">
        <div class="course-txt-con">
          <p class="couse-one-txt">课程学习</p>
          <p class="couse-two-txt">1-1&nbsp;概述</p>
        </div>
      </div>
    </div>
    </a> </div>
</article>

<!--底部-->
<footer class="footer">
  <ul>
    <a href="index.html">
    <li><img width="22px" height="22px" src="../src/images/bottom_png_5.png">
      <p>学习中心</p>
    </li>
    </a> <a href="mytask.html">
    <li><img width="22px" height="22px" src="../src/images/bottom_png_4.png">
      <p class="bottom-blue-txt">我的任务</p>
    </li>
    </a> <a href="zone.html">
    <li><img width="22px" height="22px" src="../src/images/bottom_png_3.png">
      <p>个人中心</p>
    </li>
    </a>
  </ul>
</footer>
</body>
</html>